<template>
    <div class="container container-resource">
        <a-spin tip="Loading..." :spinning="loading">
            <div class="page-top">
                <a-carousel autoplay arrows draggable>
                    <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
                        <a-icon type="left-circle" />
                    </div>
                    <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
                        <a-icon type="right-circle" />
                    </div>
                    <div class="index-bgbox" v-for="item in bannerList">
                        <img class="page-top-bg" :src="item" />

                    </div>
                </a-carousel>
                <div class="page-top-panel">
                    <div class="page-top-title">资源对接</div>
                    <div class="top-input-box">
                        <input class="top-input" v-model="keywords" type="text" placeholder="输入您想查找的成果和需求…"
                            @keyup.enter="resetList">
                        <a-icon class="top-input-ico" type="search" @click="resetList" />
                    </div>
                </div>
            </div>
            <div class="page-content" v-if="pageList.length>0">
                <div class="page-content-list" v-for="item in pageList" :key="item.id">
                    <div class="content-list-bg">
                        <img class="p-c-l-bg" :src="item.coverPicture" />
                    </div>
                    <div style="padding:15px 20px">
                        <div class="p-c-l-title">{{item.name}}</div>
                        <!-- <div class="p-c-l-content">{{splitContent(item.introduce)}}</div> -->
                        <div class="p-c-l-bottom">
                            <div>
                                <div class="bottom-left">{{item.relationDepartment}}</div>
                                <div class="bottom-left">{{item.contactWay}}</div>
                            </div>
                            <div style="cursor: pointer;" @click="jumpDetail(item.id)">
                                <i class="iconfont detail-ico">&#xe775;</i>
                                <span class="detail-words">了解详情</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="text-align:right">
                    <a-pagination v-model="pageNum" :pageSize="pageSize" :total="total" show-less-items @change="pageChange" />
                </div>
            </div>
            <div class="page-content" v-else>
                <div class="list-null">
                    <div class="iconfont">&#xe642;</div>
                    <div>暂无数据</div>
                </div>

            </div>
        </a-spin>
    </div>
</template>

<script lang="ts">
import api from "@/api/api";
import { Vue, Component } from "vue-property-decorator";
@Component({
    name: "dom",
    components: {},
})
export default class index extends Vue {
    pageNum = 1;
    total = 0;
    pageSize = 9;
    pageList = [];
    loading = false;
    keywords = "";
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await api.findResourceAbutment({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                keywords: this.keywords,
            });
            this.pageList = res.data?.rows || [];
            this.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pageNum = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pageSize = pageSize;
        this.pageNum = page;
        this.getList();
    }
    async mounted() {
        await this.getBanner();
        this.getList();
    }
    splitContent(str: string) {
        let s = str.replace(/\<\p\>/g, "");
        s = s.replace(/\<\/\p\>/g, "。");
        return s.slice(0, 65) + "...";
    }
    jumpDetail(id) {
        this.$router.push({ name: "resourceDetail", query: { id } });
    }
    bannerList = [""];
    async getBanner() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await api.getBannerList({
                pageTable: "资源对接banner",
            });

            const rows = res.data?.rows || [];
            const pictures = rows[0]?.pictures || "";
            this.bannerList = pictures ? JSON.parse(pictures) : [""];
        } finally {
            this.loading = false;
        }
    }
}
</script>

<style lang="scss">
.container-resource {
    .page-top {
        position: relative;
    }
    .index-bgbox {
        min-height: 330px;
    }
    .page-top-bg {
        width: 100%;
    }
    .page-top-panel {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding-top: 8%;
        padding-left: 10%;
    }
    .page-top-title {
        font-weight: bold;
        font-size: 45px;
        color: #132042;
    }

    .top-input-box {
        width: 620px;
        box-shadow: 0px 10px 12px 0px rgba(47, 101, 243, 0.2);
        height: 60px;
        background-color: #fff;
        display: flex;
        align-items: center;
        border-radius: 100px;
        margin-top: 30px;
    }
    .top-input {
        font-weight: bold;
        font-size: 18px;
        height: 100%;
        border: unset;
        background-color: transparent;
        padding: 0 40px;
        flex-grow: 1;
        outline: unset;
    }
    .top-input-ico {
        display: block;
        width: 140px;
        background: #2f65f3;
        color: #ffffff;
        height: 100%;
        font-size: 30px;
        border-radius: 0 100px 100px 0;
        line-height: 65px;
        cursor: pointer;
        font-weight: bold;
    }

    .page-content {
        padding: 50px 0;
        display: block;
        margin: 0 auto;
        width: 1260px;
    }
    .page-content-list {
        width: 399px;
        margin-right: 20px;
        box-shadow: 0px 0px 14px 4px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        margin-bottom: 20px;
        border-radius: 8px;
        display: inline-block;
    }
    .content-list-bg {
        width: 100%;
        height: 250px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: solid 1px #eee;
    }
    .p-c-l-bg {
        max-width: 100%;
        max-height: 100%;
        border-radius: 4px;
    }
    .p-c-l-title {
        font-weight: bold;
        font-size: 18px;
        color: #333333;
        margin-bottom: 20px;
    }
    .p-c-l-content {
        font-size: 14px;
        color: #505050;
        padding: 10px 0;
    }
    .p-c-l-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #2f65f3;
        font-size: 14px;
    }
    .bottom-left {
    }
    .detail-ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 25px;
        height: 25px;
        color: #fff;
        border-radius: 25px;
        background-color: #2f65f3;
        margin-right: 6px;
    }
}
</style>
